﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Wptlayout.aspx.cs" Inherits="Cms.Web.CmsSystem.SysModules.TabPage.Wptlayout" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="/App_Themes/Default/960/960.css" rel="stylesheet" type="text/css" />
    <link href="/App_Themes/Default/960/text.css" rel="stylesheet" type="text/css" />
    <link href="/App_Themes/Default/960/reset.css" rel="stylesheet" type="text/css" />
    <script src="/Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
    <link href="/App_Themes/Default/easyui/easyui.css" rel="stylesheet" type="text/css" />
    <link href="/App_Themes/Default/easyui/icon.css" rel="stylesheet" type="text/css" />
    <script src="/Scripts/easyui/jquery.easyui.min.js" type="text/javascript"></script>
    <script src="/Scripts/easyui/EasyWin.js" type="text/javascript"></script>
    <script src="/Scripts/960layout.js" type="text/javascript"></script>
    <script src="/Scripts/core.js" type="text/javascript"></script>
    <script src="/Scripts/json.js" type="text/javascript"></script>
    <style type="text/css">
        .gridcell
        {
            min-height: 150px;
            background: #eee;
            border-bottom: 1px dotted #eee;
        }
        .gridcell.checked
        {
            background: yellow;
        }
        .gridcell .webpart
        {
            margin: 2px;
            padding: 0px;
            height: 150px;
            background: #fff;
        }
        .webpart-title
        {
            height: 25px;
            line-height: 25px;
            border-bottom: 1px solid #ace;
            font-size: 12px;
            background: none repeat scroll 0 0 #E0ECFF;
        }
        .webpart-content
        {
            font-size: 12px;
            padding: 3px 3px;
        }
        .btn
        {
            padding: 3px 3px;
        }
        .wh
        {
            padding: 3px 3px;
        }
        .webpart
        {
            border: 1px solid #ace;
        }
        .webpart-title .icon
        {
            height: 16px;
            width: 16px;
            display: inline-block;
            background: #ccc;
            padding-right: 2px;
            margin-left: 2px;
            border: 1px solid #ace;
        }
        .webpart-title .text
        {
            float: left;
        }
        .webpart-title .btn
        {
            float: right;
        }
        .btnclose
        {
            border: 1px solid #ace;
            background-color: transparent;
            float: right;
            width: 16px;
            height: 16px;
            text-align: left;
            margin-top: 3px;
            padding: 1px;
            font-size: 16px;
        }
        .btnclose:hover
        {
            border: 1px solid blue;
        }
    </style>
    <script type="text/javascript">
        var CanvasId = "pagecontent";
        var hasContent = "<%=HasContent %>";
        function ReturnOk() {
            var html = []; // html.push("]");
            var gridCell = $("#" + CanvasId).clone();
            var index = 0;
            var array = [];
            $(".webpart", gridCell).each(function () {
                var o = {
                    index: index,
                    id: $(this).attr("partid"),
                    close: $("[name=close]", this).attr("checked") ? true : false,
                    min: $("[name=min]", this).attr("checked") ? true : false,
                    move: $("[name=move]", this).attr("checked") ? true : false,
                    max: $("[name=max]", this).attr("checked") ? true : false,
                    width: $("[name=width]", this).val(),
                    height: $("[name=height]", this).val(),
                    title: $(".webpart-title .text", this).text()
                };

                $(this).replaceWith("{" + index + "}");
                index = index + 1;
                array.push(o);
            });
            $(".gridcell", gridCell).each(function () {
                $(this).removeAttr("style"); 
            });
            var cellHtml = gridCell.html();
            for (var i in array) {
                var o = array[i];
                if (typeof (o) == "function")
                    break;
                var os = "<div class=\"design-webpart\" id=\"" + o.id + "\" allowclose=\"" + o.close + "\" allowmin=\"" + o.min + "\" allowmove=\"" + o.move + "\" allowmax=\"" + o.max + "\" width=\"" + o.width + "\" height=\"" + o.height + "\"></div>"
                cellHtml = cellHtml.replace(new RegExp("\\{" + o.index + "\\}", "ig"), os, true);
            }

            var html = "<div id=\"" + CanvasId + "\">" + cellHtml + "</div>"

            return html; // JSON.stringify(html);
        }
        function BuilderWpt(id, title, allowclose, allowmax, allowmin, allowmove, width, height) {
            var html = [];
            html.push("<div class='webpart' partid='" + id + "'>");
            html.push("<div class='webpart-title'><div class='text'>" + title + "</div>");
            html.push("<input type='button' class='btnclose' value='X'/>");
            html.push("</div>");
            html.push("<div class='webpart-content'>");
            var cid = "ck" + newGuid();

            html.push("<div class='btn'>");
            html.push("<input id='" + cid + "' type='checkbox' name='close' " + (allowclose ? "checked" : "") + "/> <label for='" + cid + "'>关闭</label>");
            cid = "ck" + newGuid();
            html.push("<input id='" + cid + "'type='checkbox' name='max' " + (allowmax ? "checked" : "") + "/> <label for='" + cid + "'>最大</label>");
            cid = "ck" + newGuid();
            html.push("<input id='" + cid + "'type='checkbox' name='min' " + (allowmin ? "checked" : "") + "/> <label for='" + cid + "'>最小</label>");
            cid = "ck" + newGuid();
            html.push("<input id='" + cid + "'type='checkbox' name='move' " + (allowmove ? "checked" : "") + "/> <label for='" + cid + "'>移动</label>");
            html.push("</div>");
            html.push("<div class='wh'>");
            cid = "txt" + newGuid();
            html.push("<label for='" + cid + "'>宽</label><input id='" + cid + "'type='text' name='width' style='width:25px;' value='" + (width ? width : "") + "'/>");
            cid = "txt" + newGuid();
            html.push("<label for='" + cid + "'>高</label><input id='" + cid + "'type='text' name='height' style='width:25px;' value='" + (height ? height : "") + "'/>");
            html.push("</div>");
            html.push("</div>");
            html.join("</div>");
            return html.join("");
        }
        $(function () {
            if (hasContent == "True") {
                $("#" + CanvasId + " .design-webpart").each(function () {
                    var id = $(this).attr("id");
                    var allowmove = $(this).attr("allowmove");
                    var allowmin = $(this).attr("allowmin");
                    var allowmax = $(this).attr("allowmax");
                    var alloclose = $(this).attr("allowclose");
                    var width = $(this).attr("width");
                    var height = $(this).attr("height");
                    var text = $(this).text();
                    var s = BuilderWpt(id, text, alloclose, allowmax, allowmin, allowmove, width, height);
                    $(this).replaceWith(s);
                });
                $("#" + CanvasId + " .gridcell").click(function () {
                    $("#" + CanvasId + " .gridcell").filter(".checked").removeClass("checked");
                    $(this).addClass("checked");
                });
                $(".btnclose").click(function () {
                    $(this).parents(".webpart").remove();
                });
            }
            else
                BuildForm(CanvasId, $("#btncols").val(), $("#btnrows").val());
            $("#btnresetcanvas").click(function () {
                BuildForm(CanvasId, $("#btncols").val(), $("#btnrows").val());
            });
            $("#btnright").click(function () {
                MergerToRight(CanvasId);
            });
            $("#btndown").click(function () {
                MergerToDown(CanvasId);
            });
            $("#btnsetwpt").click(function () {
                $.EasyWin({
                    css: { width: "600px", height: "400px" },
                    url: "/CmsSystem/SysAdmin/PopWin/TreeGrid.aspx?id=3e3fed47-7c00-416c-9ab4-019f8ab9b051",
                    submit: function (data) {
                        var json = eval("(" + data + ")");
                        var html = [];
                        for (var i in json) {
                            if (typeof (json[i]) == "function")
                                continue;
                            var t = BuilderWpt(json[i]["ID"], json[i]["TITLE"], json[i]["ALLOW_CLOSE"], json[i]["ALLOW_MAX"], json[i]["ALLOW_MIN"], json[i]["ALLOW_MOVE"], json[i]["WIDTH"], json[i]["HEIGHT"]);
                            html.push(t);
                        }
                        $(".gridcell.checked").append(html.join(""));
                        $(".btnclose").click(function () {
                            $(this).parents(".webpart").remove();
                        });
                        return true;
                    }
                });
            });
            var pageHeight = GetInnerHeight();
            $("#" + CanvasId).css("height", pageHeight - 30 + "px").css("overflow", "auto");
        });
    </script>
</head>
<body>
    <div style="height: 30px;">
        行:<input type="text" id="btnrows" value="5" />
        列:<input type="text" id="btncols" value="3" />
        <input type="button" id="btnresetcanvas" value="重置布局" />
        <input type="button" id="btnright" value="向右合并" />
        <input type="button" id="btndown" value="向下合并" />
        <input type="button" id="btnsetwpt" value="分配WPT" />
    </div>
    <asp:Literal ID="LitContent" runat="server">
    
    </asp:Literal>
</body>
</html>
